<template>
  <div class="box">
    组件1: {{count}}
    <button @click="changeCount(5)">+5</button>
    <button @click="changeCount(10)">+10</button>
  </div>
</template>

<script>
import { mapState} from 'vuex'
export default {
 computed: {
    ...mapState([
      'count',
      'msg'
    ])
  } ,
  methods: {
    changeCount(n) {
      // 错误的修改方式 忘记它
      // this.$store.state.count++

      // 正确的修改方法
      this.$store.commit('addCount', n)
    }
  }
}
</script>

<style lang="css" scoped>
.box{
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
</style>